<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="m-t-24">
    <el-form-item label="公告标题" prop="title" ref="title">
      <el-input v-model.trim="form.title" />
    </el-form-item>
    <el-form-item label="公告内容" prop="content" ref="content">
      <el-input v-show="false" v-model="form.content" />
      <ckeditor ref="editor" :content.sync="form.content" class="h-small" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit" :loading="loading">发布公告</el-button>
      <el-button class="right" @click="clear">清空</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'release-announcement', // 发布公告
  data() {
    return {
      form: {
        title: '',
        content: '',
      },
      rules: {
        title: [{ required: true, validator: this.$va.title }],
        content: [{ required: true, validator: this.$va.content }],
      },
      loading: false, // 正发送公告
    };
  },
  methods: {
    // 发布公告
    onSubmit() {
      this.$refs.form.validate((valid, errs) => {
        if (valid) {
          this.loading = true;
          this.$api.announcements.create({
            title: this.form.title,
            content: this.form.content,
          }).then((res) => {
            this.$message.success('发布成功');
            this.$emit('released', res.data);
            this.clear();
          }).catch(() => {})
            .then(() => { this.loading = false; });
        } else this.$refs[Object.keys(errs)[0]].$el.scrollIntoView({ block: 'center' });
      });
    },
    // 清空
    clear() {
      this.$refs.form.resetFields();
      this.$refs.editor.clearContent();
    },
  },
};
</script>

<style></style>
